/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */
$theme-map: null;
$dominant-color: #ffcc00;
$orange-color: #ffb000;

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 行为相关颜色 */
$color-primary: #f5a654;
$color-success: #4cd964;
$color-warning: #fab714;
$color-error: #d12e32;
/* 主题色 */
$theme-fir: #f5a654;
$theme-sec: #4cd964;
$theme-thir: #fab714;
$theme-fou: #d12e32;
$theme-fiv: #007aff;
/* 文字基本颜色 */
$uni-text-color: #333; //基本色
$uni-text-color-inverse: #fff; //反色
$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;
/* 文字基本颜色 */
$text-color-base: #5a5b5c; //基本色
$text-color-assist: #919293; //辅助色
$text-color-black: #3b3c3e; //黑
$text-color-grey: #878889; //灰
$text-color-white: #ffffff; //白

/* 背景颜色 */
$uni-bg-color: #ffffff;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1; //点击状态颜色
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
/* 背景颜色 */
$bg-color: #f1f8fa;
$bg-color-grey: #f5f5f5;
$bg-color-primary: #e8eacf;
/* 边框颜色 */
$uni-border-color: #c8c7cc;
/* 边框颜色 */
$border-color: #e2e2e2;
/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm: 24upx;
$uni-font-size-base: 28upx;
$uni-font-size-lg: 32upx;

/* 文字尺寸 */
$font-size-sm: 24rpx;
$font-size-base: 28rpx;
$font-size-lg: 32rpx;

/* 图片尺寸 */
$uni-img-size-sm: 40upx;
$uni-img-size-base: 52upx;
$uni-img-size-lg: 80upx;

/* Border Radius */
$uni-border-radius-sm: 4upx;
$uni-border-radius-base: 6upx;
$uni-border-radius-lg: 12upx;
$uni-border-radius-circle: 50%;
$uni-border-radius-big: 35rpx;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20upx;
$uni-spacing-row-lg: 30upx;

/* 垂直间距 */
$uni-spacing-col-sm: 8upx;
$uni-spacing-col-base: 16upx;
$uni-spacing-col-lg: 24upx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2c405a; // 文章标题颜色
$uni-font-size-title: 40upx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle: 36upx;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 30upx;

$box-shadow: 0 20rpx 20rpx -20rpx rgba(
		$color: #333,
		$alpha: 0.1
	);

/* start--主题色--start */
$themes: (
	theme0: (
		white0: rgba(255, 255, 255, 0),
		font_color: #fee238 /* 主题色文字 */,
		font_color_inverse: #111111 /* 主题色背景下的文字 */,
		background_color: #fee238 /* 主题色背景 */,
		border_color: #fee238 /* 主题色边框 */,
		theme-price: #fa301b /* 价格颜色 */,
		notice-price: #fa301b /* 公告颜色 */ /* 左侧分类数字小标背景色 */,
		notice-bg: rgba(#fa301b, 0.15) /* 公告背景 */,
		full-reduction-bg: #fef9e3 /* 底部满减条件背景色值 */,
		full-reduction-font: #fa301b /* 底部满减条件价格色值 */,
		dine-in: #fef9e3 /* 堂食点餐人数按钮背景色 */ /* 堂食查看订单详情按钮背景色 */,
		opacify_background_0: rgba(255, 204, 0, 0.09) /* 渐变用主题色的第二值 */,
		bg_user_index1: rgba(254, 226, 56, 0.25) /* 个人中心未登录顶部渐变用主题色的第一值 */,
		bg_user_index2: rgba(255, 255, 255, 0.63) /* 个人中心未登录顶部渐变用主题色的第二值 */,
		bg_user_index3: rgb(255, 255, 255) /* 个人中心未登录顶部渐变用主题色的第三值 */,
		text_color: #ffffff /* 主题色背景下的白色 */,
		bg-nop-6: #fffdf3 /* 透明度15%的主题色 */,
		bg-op: /* 透明度15%的主题色 */
			rgba(
				$color: #fee238,
				$alpha: 0.15
			),
		bg-op-6: /* 透明度15%的主题色 */
			rgba(
				$color: #fee238,
				$alpha: 0.06
			),
		bg-op-25: /* 透明度25%的主题色 */
			rgba(
				$color: #fee238,
				$alpha: 0.25
			)
	),
	theme1: (
		white0: rgba(255, 255, 255, 0),
		font_color: #b91d32 /* 主题色文字 */,
		font_color_inverse: #ffffff /* 主题色背景下的文字 */,
		background_color: #b91d32 /* 主题色背景 */,
		border_color: #b91d32 /* 主题色边框 */,
		theme-price: #b91d32 /* 价格颜色 */,
		notice-price: #b91d32 /* 公告颜色 */ /* 左侧分类数字小标背景色 */,
		notice-bg: rgba(#b91d32, 0.15) /* 公告背景 */,
		full-reduction-bg: #f9e8e9 /* 底部满减条件背景色值 */,
		full-reduction-font: #b91d32 /* 底部满减条件价格色值 */,
		dine-in: #f9e8e9 /* 堂食点餐人数按钮背景色 */ /* 堂食查看订单详情按钮背景色 */,
		opacify_background_0: #ffe1e1 /* 渐变用主题色的第二值 */,
		bg_user_index1: #ffe1e1 /* 个人中心未登录顶部渐变用主题色的第一值 */,
		bg_user_index2: #ffffff /* 个人中心未登录顶部渐变用主题色的第二值 */,
		bg_user_index3: #ffffff /* 个人中心未登录顶部渐变用主题色的第三值 */,
		text_color: #ffffff /* 主题色背景下的白色 */,
		bg-nop-6: #fbf2f3 /* 透明度15%的主题色 */,
		bg-op: /* 透明度15%的主题色 */
			rgba(
				$color: #b91d32,
				$alpha: 0.15
			),
		bg-op-6: /* 透明度15%的主题色 */
			rgba(
				$color: #b91d32,
				$alpha: 0.06
			),
		bg-op-25: /* 透明度25%的主题色 */
			rgba(
				$color: #b91d32,
				$alpha: 0.25
			)
	),
	theme2: (
		white0: rgba(255, 255, 255, 0),
		font_color: #09b4f1 /* 主题色文字 */,
		font_color_inverse: #ffffff /* 主题色背景下的文字 */,
		background_color: #09b4f1 /* 主题色背景 */,
		border_color: #09b4f1 /* 主题色边框 */,
		theme-price: #fb5032 /* 价格颜色 */,
		notice-price: #fb5032 /* 公告颜色 */ /* 左侧分类数字小标背景色 */,
		notice-bg: rgba(#fb5032, 0.15) /* 公告背景 */,
		full-reduction-bg: #fefbea /* 底部满减条件背景色值 */,
		full-reduction-font: #fb5032 /* 底部满减条件价格色值 */,
		dine-in: #daf4fd /* 堂食点餐人数按钮背景色 */ /* 堂食查看订单详情按钮背景色 */,
		opacify_background_0: #b3e8fb /* 渐变用主题色的第二值 */,
		bg_user_index1: #b3e8fb /* 个人中心未登录顶部渐变用主题色的第一值 */,
		bg_user_index2: #ffffff /* 个人中心未登录顶部渐变用主题色的第二值 */,
		bg_user_index3: #ffffff /* 个人中心未登录顶部渐变用主题色的第三值 */,
		text_color: #ffffff /* 主题色背景下的白色 */,
		bg-nop-6: #f1fbfe /* 透明度15%的主题色 */,
		bg-op: /* 透明度15%的主题色 */
			rgba(
				$color: #09b4f1,
				$alpha: 0.15
			),
		bg-op-6: /* 透明度15%的主题色 */
			rgba(
				$color: #09b4f1,
				$alpha: 0.06
			),
		bg-op-25: /* 透明度25%的主题色 */
			rgba(
				$color: #09b4f1,
				$alpha: 0.25
			)
	),
	theme3: (
		white0: rgba(255, 255, 255, 0),
		font_color: #00a348 /* 主题色文字 */,
		font_color_inverse: #ffffff /* 主题色背景下的文字 */,
		background_color: #00a348 /* 主题色背景 */,
		border_color: #00a348 /* 主题色边框 */,
		theme-price: #e6444d /* 价格颜色 */,
		notice-price: #e6444d /* 公告颜色 */ /* 左侧分类数字小标背景色 */,
		notice-bg: rgba(#e6444d, 0.15) /* 公告背景 */,
		full-reduction-bg: #e1f5eb /* 底部满减条件背景色值 */,
		full-reduction-font: #e6444d /* 底部满减条件价格色值 */,
		dine-in: #e5f6ec /* 堂食点餐人数按钮背景色 */ /* 堂食查看订单详情按钮背景色 */,
		opacify_background_0: #c7ebd6 /* 渐变用主题色的第二值 */,
		bg_user_index1: #c7ebd6 /* 个人中心未登录顶部渐变用主题色的第一值 */,
		bg_user_index2: rgba(255, 255, 255, 0.63) /* 个人中心未登录顶部渐变用主题色的第二值 */,
		bg_user_index3: rgb(255, 255, 255) /* 个人中心未登录顶部渐变用主题色的第三值 */,
		text_color: #ffffff /* 主题色背景下的白色 */,
		bg-nop-6: #f0faf4 /* 透明度15%的主题色 */,
		bg-op: /* 透明度15%的主题色 */
			rgba(
				$color: #00a348,
				$alpha: 0.15
			),
		bg-op-6: /* 透明度15%的主题色 */
			rgba(
				$color: #00a348,
				$alpha: 0.06
			),
		bg-op-25: /* 透明度25%的主题色 */
			rgba(
				$color: #00a348,
				$alpha: 0.25
			)
	),
	theme4: (
		white0: rgba(255, 255, 255, 0),
		font_color: #fd8103 /* 主题色文字 */,
		font_color_inverse: #ffffff /* 主题色背景下的文字 */,
		background_color: #fd8103 /* 主题色背景 */,
		border_color: #fd8103 /* 主题色边框 */,
		theme-price: #111111 /* 价格颜色 */,
		notice-price: #fd8103 /* 公告颜色 */ /* 左侧分类数字小标背景色 */,
		notice-bg: rgba(#fd8103, 0.15) /* 公告背景 */,
		full-reduction-bg: #fef9e3 /* 底部满减条件背景色值 */,
		full-reduction-font: #fa301b /* 底部满减条件价格色值 */,
		dine-in: #fef9e3 /* 堂食点餐人数按钮背景色 */ /* 堂食查看订单详情按钮背景色 */,
		opacify_background_0: #ffe5cb /* 渐变用主题色的第二值 */,
		bg_user_index1: #ffe5cb /* 个人中心未登录顶部渐变用主题色的第一值 */,
		bg_user_index2: #ffffff /* 个人中心未登录顶部渐变用主题色的第二值 */,
		bg_user_index3: #ffffff /* 个人中心未登录顶部渐变用主题色的第三值 */,
		text_color: #ffffff /* 主题色背景下的白色 */,
		bg-nop-6: #fff8f0 /* 透明度15%的主题色 */,
		bg-op: /* 透明度15%的主题色 */
			rgba(
				$color: #fd8103,
				$alpha: 0.15
			),
		bg-op-6: /* 透明度15%的主题色 */
			rgba(
				$color: #fd8103,
				$alpha: 0.06
			),
		bg-op-25: /* 透明度25%的主题色 */
			rgba(
				$color: #fd8103,
				$alpha: 0.25
			)
	),
	theme5: (
		white0: rgba(255, 255, 255, 0),
		font_color: #b99970 /* 主题色文字 */,
		font_color_inverse: #fff /* 主题色背景下的文字 */,
		background_color: #b99970 /* 主题色背景 */,
		border_color: #b99970 /* 主题色边框 */,
		theme-price: #111111 /* 价格颜色 */,
		notice-price: #fe4b4e /* 公告颜色 */ /* 左侧分类数字小标背景色 */,
		notice-bg: rgba(#fe4b4e, 0.15) /* 公告背景 */,
		full-reduction-bg: #fefbea /* 底部满减条件背景色值 */,
		full-reduction-font: #fe4b4e /* 底部满减条件价格色值 */,
		dine-in: #f5f0ea /* 堂食点餐人数按钮背景色 */ /* 堂食查看订单详情按钮背景色 */,
		opacify_background_0: #ede4d9 /* 渐变用主题色的第二值 */,
		bg_user_index1: #ede4d9 /* 个人中心未登录顶部渐变用主题色的第一值 */,
		bg_user_index2: #ffffff /* 个人中心未登录顶部渐变用主题色的第二值 */,
		bg_user_index3: #ffffff /* 个人中心未登录顶部渐变用主题色的第三值 */,
		text_color: #ffffff /* 主题色背景下的白色 */,
		bg-nop-6: #fbf9f7 /* 透明度15%的主题色 */,
		bg-op: /* 透明度15%的主题色 */
			rgba(
				$color: #b99970,
				$alpha: 0.15
			),
		bg-op-6: /* 透明度15%的主题色 */
			rgba(
				$color: #b99970,
				$alpha: 0.06
			),
		bg-op-25: /* 透明度25%的主题色 */
			rgba(
				$color: #b99970,
				$alpha: 0.25
			)
	),
	theme6: (
		white0: rgba(255, 255, 255, 0),
		font_color: #a4a4d6 /* 主题色文字 */,
		font_color_inverse: #ffffff /* 主题色背景下的文字 */,
		background_color: #a4a4d6 /* 主题色背景 */,
		border_color: #a4a4d6 /* 主题色边框 */,
		theme-price: #111111 /* 价格颜色 */,
		notice-price: #fb5032 /* 公告颜色 */ /* 左侧分类数字小标背景色 */,
		notice-bg: rgba(#fb5032, 0.15) /* 公告背景 */,
		full-reduction-bg: #fefbea /* 底部满减条件背景色值 */,
		full-reduction-font: #fb5032 /* 底部满减条件价格色值 */,
		dine-in: #f1f1f9 /* 堂食点餐人数按钮背景色 */ /* 堂食查看订单详情按钮背景色 */,
		opacify_background_0: #d9d9ee /* 渐变用主题色的第二值 */,
		bg_user_index1: #d9d9ee /* 个人中心未登录顶部渐变用主题色的第一值 */,
		bg_user_index2: rgba(255, 255, 255, 0.63) /* 个人中心未登录顶部渐变用主题色的第二值 */,
		bg_user_index3: rgb(255, 255, 255) /* 个人中心未登录顶部渐变用主题色的第三值 */,
		text_color: #ffffff /* 主题色背景下的白色 */,
		bg-nop-6: #fafafd /* 透明度15%的主题色 */,
		bg-op: /* 透明度15%的主题色 */
			rgba(
				$color: #a4a4d6,
				$alpha: 0.15
			),
		bg-op-6: /* 透明度15%的主题色 */
			rgba(
				$color: #a4a4d6,
				$alpha: 0.06
			),
		bg-op-25: /* 透明度25%的主题色 */
			rgba(
				$color: #a4a4d6,
				$alpha: 0.25
			)
	)
);
//遍历主题map
@mixin themeify {
	@each $theme-name, $theme-map in $themes {
		$theme-map: $theme-map !global;

		/* #ifdef MP-ALIPAY */
		.#{$theme-name} & {
			@content;
		}
		/* #endif */
		/* #ifndef MP-ALIPAY */
		[data-theme='#{$theme-name}'] & {
			@content;
		}
		/* #endif */
	}
}

@function themed($key) {
	@return map-get($theme-map, $key);
}

//获取背景颜色
@mixin background_color($color) {
	@include themeify {
		background-color: themed($color) !important;
	}
}

//获取渐变背景颜色
@mixin background_linear($color, $color1, $deg, $min, $max) {
	@include themeify {
		background: linear-gradient($deg, themed($color) $min, themed($color1) $max) !important;
	}
}
@mixin background_linearTr($color, $color1, $color2, $deg, $min, $max, $max2) {
	@include themeify {
		background: linear-gradient($deg, themed($color) $min, themed($color1) $max, themed($color2) $max2) !important;
	}
}
//获取字体颜色
@mixin font_color($color) {
	@include themeify {
		color: themed($color) !important;
	}
}
//获取主题背景下的字体颜色
@mixin text_color($color) {
	@include themeify {
		color: themed($color) !important;
	}
}

//获取边框颜色
@mixin border_color($color) {
	@include themeify {
		border-color: themed($color) !important;
	}
}
